<template>
  <div class="good-header">
    <div class="outer"></div>
    <p class="title">
      {{title}}
    </p>
    <p class="time" v-if="isTime">
      {{ time }}
      <span>{{ year }}</span>
    </p>
    <div class="back" @click="back" v-if="isBack">
      返回
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    isBack: {
      type: Boolean,
      default: false
    },
    isTime: {
      type: Boolean,
      default: false
    }
  },
  components: {
  },
  data(){
    return{
      year: '',
      time: ''
    };
  },
  mounted() {
    setInterval(() => {
      this.getTime();
    }, 1000);
  },
  methods: {
    getTime(){
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours()>9?date.getHours():`0${ date.getHours() }`;
      let minute = date.getMinutes()>9?date.getMinutes():`0${ date.getMinutes() }`;
      let second = date.getSeconds()>9?date.getSeconds():`0${ date.getSeconds() }`;
      // let time = `${ year }年${ month }月${ day }日${ hour }时${ minute }分${ second }秒`;
      this.year = `${ year }.${ month }.${ day }`;
      this.time = `${ hour }:${ minute }:${ second }`;
    },
    back(){
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>

.good-header{
  width: 100%;
  height: companyH(137vh);
  background: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/header-bg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .outer{
    width: 100%;
    height: 100%;
    background: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/header-bg1.png') no-repeat;
    background-size: 100% companyH(100vh);
    position: absolute;
    top: 0;
  }
  .title{
    font-size: companyH(52vh);
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    padding-top: companyH(15vh);
    letter-spacing: companyW(20vw);
    text-shadow: 0px 3px 16px rgba(1,10,87,0.67);
  }
  .time{
    position: absolute;
    font-size: companyH(36vh);
    font-family: Teko;
    font-weight: bold;
    font-style: italic;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    top: companyH(23vh);
    right: companyW(26vw);
    span{
      font-size: companyH(24vh);
      font-family: Teko;
      font-weight: 400;
      font-style: italic;
      color: #FFFFFF;
      margin-left: companyW(19vw);
    }
  }
  .back{
    position: absolute;
    width: companyW(173vw);
    height: companyH(47vh);
    top: companyH(27vh);
    left: companyW(31vw);
    background: url('https://srwebapp.oss-cn-beijing.aliyuncs.com/web/sirui-board-ui/mobile/component/lx/back-bg.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    font-size: companyH(16vh);
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #E6F2FF;
    line-height: companyH(47vh);
    text-shadow: 0px 2px 3px rgba(14,47,85,0.2);
    text-align: center;
  }
}
</style>
